<template>
  <div class="layout layout-content-box" v-loading="loading" element-loading-text="拼命加载中" element-loading-background="rgba(205, 205, 205, 0.6)">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left;">编辑软件信息</span>
        <el-button style="float: right;padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <div class="item-content-box">
        <el-form label-position="left" :model="softwareForm" :rules="rules" ref="softwareForm" label-width="160px" size="small" class="demo-softwareForm">
          <el-row :gutter="20">
            <el-col :span="12" class="item-box left-item-box">
                <el-form-item label="软件标题" required prop="title">
                  <el-input v-model="softwareForm.title" placeholder="软件标题"></el-input>
                </el-form-item>
                <el-form-item label="中文名称" required prop="chineseName">
                  <el-input v-model="softwareForm.chineseName" placeholder="中文名称"></el-input>
                </el-form-item>
                <el-form-item label="软件logo" required prop="logo">
                  <input v-model="softwareForm.logo" type="hidden">
                  <el-upload
                    class="upload-demo" ref="upload" name="logo"
                    action="/dash/upload/logo"
                    :on-preview="handlePreview"
                    :on-success="handleLogoSuccess"
                    :on-error="handleUploadError"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :show-file-list="false">
                    <el-button  slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;"  class="el-icon-upload" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    <a v-bind:href="softwareForm.logo" style="margin-left: 10px;" target="_blank"><el-button type="text">预览文件</el-button></a>
                  </el-upload>
                </el-form-item>
                <el-form-item label="创建日期" prop="createTime">
                  <el-date-picker  v-model="softwareForm.createTime" type="date" disabled></el-date-picker>
                </el-form-item>
                <el-form-item label="软件类别" required prop="category">
                  <el-select v-model="softwareForm.category">
                    <el-option v-for="(item,key) in category" :key="key" :label="item.cname" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="软件作者"  prop="author">
                  <el-input v-model="softwareForm.author" placeholder="作者"></el-input>
                </el-form-item>
                <el-form-item label="软件官网"  prop="website">
                  <el-input v-model="softwareForm.website" placeholder="http://"></el-input>
                </el-form-item>
                <el-form-item label="Windows下载地址" prop="windowsURL">
                <el-input v-model="softwareForm.windowsURL"></el-input>
                </el-form-item>
                <el-form-item label="Linux下载地址" prop="linuxURL">
                  <el-input v-model="softwareForm.linuxURL"></el-input>
                </el-form-item>
                <el-form-item label="Android下载地址" prop="androidURL">
                  <el-input v-model="softwareForm.androidURL"></el-input>
                </el-form-item>
                <el-form-item label="软件简介" required prop="description">
                  <el-input type="textarea" v-model="softwareForm.description" :rows="3"></el-input>
                </el-form-item>
                <el-form-item label="是否允许下载" prop="downloadEnabled">
                  <el-switch v-model="softwareForm.downloadEnabled"  active-color="#13ce66" inactive-color="#ff4949"
                   active-text="允许" inactive-text="禁止"></el-switch>
                </el-form-item>
            </el-col>
            <el-col :span="12" class="item-box right-item-box">
                <el-form-item label="软件全称" prop="wholeName">
                  <el-input v-model="softwareForm.wholeName" placeholder="软件全称"></el-input>
                </el-form-item>
                <el-form-item label="英文名称"  prop="englishName">
                  <el-input v-model="softwareForm.englishName" placeholder="英文名称"></el-input>
                </el-form-item>
                <el-form-item label="封面海报"  prop="poster">
                  <input v-model="softwareForm.poster" type="hidden">
                  <el-upload
                    class="upload-demo" ref="upload" name="poster"
                    action="/dash/upload"
                    :on-preview="handlePreview"
                    :on-success="handlePosterSuccess"
                    :on-error="handleUploadError"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :show-file-list="false">
                    <el-button  slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;"  class="el-icon-upload" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    <a v-bind:href="softwareForm.poster" style="margin-left: 10px;" target="_blank"><el-button type="text">预览文件</el-button></a>
                  </el-upload>
                </el-form-item>
                <el-form-item label="更新日期" prop="updateTime">
                  <el-date-picker  v-model="softwareForm.updateTime" type="date" disabled></el-date-picker>
                </el-form-item>
                <el-form-item label="适用平台" prop="platform">
                  <el-checkbox-group v-model="softwareForm.platform">
                    <el-checkbox-button type="danger" v-for="item in platforms" :key="item.value" :label="item.value">{{item.name}}</el-checkbox-button>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="开发公司" prop="company">
                  <el-input v-model="softwareForm.company" placeholder="开发公司"></el-input>
                </el-form-item>
                <el-form-item label="软件版本号" prop="version">
                  <el-input v-model="softwareForm.version" placeholder="版本号"></el-input>
                </el-form-item>
                <el-form-item label="macOS下载地址" prop="macOSURL">
                <el-input v-model="softwareForm.macOSURL"></el-input>
                </el-form-item>
                <el-form-item label="iOS下载地址" prop="iOSURL">
                <el-input v-model="softwareForm.iOSURL"></el-input>
                </el-form-item>
                <el-form-item label="其他下载地址" prop="otherURL">
                <el-input v-model="softwareForm.otherURL"></el-input>
                </el-form-item>
                <el-form-item label="下载说明" prop="instruction">
                  <el-input type="textarea" v-model="softwareForm.instruction" disbaled :rows="3"></el-input>
                </el-form-item>
                <el-form-item label="关键词标签">
                  <el-tag size="medium" :key="tag" v-for="tag in softwareForm.tags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
                  <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                    @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                  </el-input>
                  <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ New Tag</el-button>
                 </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
                <el-form-item  label="版权声明" prop="copyrightIntro">
                  <el-input type="textarea" v-model="softwareForm.copyrightIntro" disabled></el-input>
                </el-form-item>
                <div class="editor-box" prop="content">
                  <!-- bidirectional data binding（双向数据绑定） -->
                  <ueditor ref="ueditor"></ueditor>
                </div>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('softwareForm')">保存信息</el-button>
                  <el-button type="danger" @click="resetForm('softwareForm')">重置表单</el-button>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </el-card>
  </div>
</template>
<style lang="scss" scoped>

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }



  .editor-box{
    max-height:360px;
    overflow:scroll;
  }
</style>
<script>
  import ueditor from '../ueditor/editor.vue';
  export default {
    components:{ueditor},
    data() {
      return {
        loading:true,
        fileList: [],
        tags: [],
        inputVisible: false,
        inputValue: '',
        content: '',
        platforms:[
          {name:'Windows',value:'windows',download:''},
          {name:'macOS',value:'macOS',download:''},
          {name:'Linux',value:'linux',download:''},
          {name:'iOS',value:'iOS',download:''},
          {name:'Android',value:'android',download:''},
          {name:'other',value:'other',download:''},
        ],
        category: [
          {'cid':0,cname:'通用应用',value:0},
          {'cid':1,cname:'图形设计',value:1},
          {'cid':2,cname:'网页设计',value:2},
          {'cid':3,cname:'特效动画',value:3},
          {'cid':4,cname:'原型设计',value:4},
          {'cid':5,cname:'视频编辑',value:5},
          {'cid':6,cname:'其他应用',value:6},
        ],
        softwareForm: {
          title: '',
          description: '',
          logo:'',
          poster:'',
          category:0,
          chineseName:'',
          englishName:'',
          wholeName:'',
          author: '',
          copyright: '',
          copyrightList:[],
          platform:[],
          isPublish: true,
          isOriginal: true,
          publishTime:Date.now(),
          instruction:`本站所有软件均来源于网络，仅供学习使用，请支持正版！ `,
          copyrightIntro:`如无特殊说明，本站内容（包含文字、图片、视频及其他形式的载体）均归属于miaoui.com，转载请联系 @妙UI 授权。原作品版权归属原作者。转载时请在文首注明，来源 miaoui.com ，欢迎关注@妙ui `,
          website:'',
          tags:[],
          content:'',
        },
        rules: {
          title: [
            { required: true, message: '请输入软件名称', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请填写文章内容', trigger: 'blur' }
          ],
        }
      };
    },
    computed: {

    },
    methods: {
      init(){
        this.initPage();
      },

      initPage(){
        this.axios.get('/dash/software/'+this.$route.params.id).then(
          response => {
            //更新页面数据
            var _DATA = response.data;
            this.softwareForm=_DATA.data;
            //this.softwareForm.platform=['windows'];
            this.softwareForm.uid=this.$route.params.id;
            //成功后隐藏loading
            this.loading=false;

            this.softwareForm.tags=this.softwareForm.tags||[];
            this.softwareForm.content=this.softwareForm.content||'';
            //初始化UMEditor内容
            this.setContent(this.softwareForm.content);
          },
          err => {
            //隐藏loading
            this.loading=false;
            console.error("catch error:", err);
          }
        );
      },
      handleClose(tag) {
        this.softwareForm.tags.splice(this.softwareForm.tags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          console.log(this.softwareForm)
          this.softwareForm.tags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

      submitForm(formName) {

        this.softwareForm.content=this.getContent();
        //alert(this.softwareForm.content);return false;
        this.$refs[formName].validate((valid) => {
          if (valid) {

            var uid=this.$route.params.id;
            this.axios.post(`/dash/software/update/${uid}`,this.softwareForm).then(
                response => {
                  //更新list table数据
                  var _DATA = response.data;

                  if(_DATA.code===200){

                    this.$message({
                      showClose: true,
                      message: '修改成功！',
                      type: 'success'
                    });

                    setTimeout(()=>{
                      this.$router.go(-1);
                    },500)
                  }else{
                    this.$message({
                      showClose: true,
                      message: '修改失败！',
                      type: 'error'
                    });
                  }

                },
                err => {
                  console.error("catch error:", err);
                }
            );

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

       // manually control the data synchronization


      handlePreview(file) {
        console.log(file);
      },
      handleLogoSuccess(response, file, fileList){
        if(response.code===200){
          this.softwareForm.logo=response.data.filePath;
        }
      },
      handlePosterSuccess(response, file, fileList){
        if(response.code===200){
          this.softwareForm.poster=response.data.filePath;
        }
      },

      handleUploadError(error, file, fileList){
          this.$message.error('上传失败!');
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      submitUpload() {
        this.$refs.upload.submit();
      },

      editorContent(e){
        console.log(e)
      },

      setContent(content){
        return this.$refs.ueditor.setUMContent(content);
      },

      //获取文档内容
      getContent(){
        return this.$refs.ueditor.getUMContent();
      }

    },

    created () {

    },
    mounted() {
      this.init();
    }
  }
</script>


